
        <div class="container">
          <div class="row">
            <div class="col-md-6 ">
              <div class="media">
                <a href="#" class="media-left">
                  
                  <img src="images/media1-jelly.jpg" width="200" height="200" alt="">
                </a>
                <div class="media-body">
                  <p class="media-heading">Jelly Fish</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, totam!</p>
                </div>  <!--end of media body -->
                  
              </div>  <!--end of media -->


                 <div class="media">
                <a href="#" class="media-left">
                  
                  <img src="images/media2-leave.jpg" width="200" height="200" alt="">
                </a>
                <div class="media-body">
                  <p class="media-heading">Leaves</p>
                  <p>id quis saepe, facilis beatae vero nesciunt sint dolorum, corporis ad quae aspernatur ipsa nisi rerum fugiat quibusdam quasi sunt. Facilis!</p>
                </div>  <!--end of media body -->
                  
              </div>  <!--end of media -->


            </div> <!--end of col-sm-6 -->
            


            <div class="col-md-6">
              <div class="tabpanel">
                <ul class="nav nav-tabs" role="tablist">

                  <li role="presentation" class="active"> <a href="#mountain" role="tab" data-toggle="tab"> Mountain</a></li>

                  <li role="presentation" > <a href="#dersert" role="tab" data-toggle="tab"> Desert</a></li>

                  <li role="presentation" > <a href="#forest" role="tab" data-toggle="tab"> Forest</a></li>

                </ul> <!--end of ul -->

             <div class="tab-content">
                <div class="tab-pane active" role="tabpanel" id="mountain">

                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quisquam a consequatur ut dolor quod provident aut minima nostrum eum, maiores illum corporis, ducimus minus architecto laborum voluptatem, quae sed, nulla dicta exercitationem facere. Maxime deleniti nihil eligendi. Quam nesciunt vitae nam quisquam libero non, ea quaerat iure cumque? Accusantium ab expedita totam libero quia soluta, obcaecati quis laudantium excepturi aliquam repellendus dignissimos magni consequatur deleniti ut veritatis amet ducimus error necessitatibus, earum! Sapiente earum debitis delectus, sunt ab, iste obcaecati deleniti, impedit consequuntur a, adipisci. Tempore, delectus, voluptatibus! Aliquam.
                  
                </div>
                   <div class="tab-pane " role="tabpanel" id="dersert">

                   Quam nesciunt vitae nam quisquam libero non, ea quaerat iure cumque? Accusantium ab expedita totam libero quia soluta, obcaecati quis laudantium excepturi aliquam repellendus dignissimos magni consequatur deleniti ut veritatis amet ducimus error necessitatibus, earum! Sapiente earum debitis delectus, sunt ab, iste obcaecati deleniti, impedit consequuntur a, adipisci. Tempore, delectus, voluptatibus! Aliquam.
                  
                </div>
                    <div class="tab-pane " role="tabpanel" id="forest">

                   ut veritatis amet ducimus error necessitatibus, earum! Sapiente earum debitis delectus, sunt ab, iste obcaecati deleniti, impedit consequuntur a, adipisci. Tempore, delectus, voluptatibus! Aliquam.
                  
                </div>


             </div> <!--end of tabcontent-->

              </div>  <!--end of tabpanel-->
            </div> <!--end of col-sm-6-->
    

          </div> <!--end of row-->